<template>
  <div class="implementation-progress-container">
    <el-card shadow="never">
      <template #header>
        <span>实施进度跟踪</span>
      </template>

      <!-- 项目选择 -->
      <el-select v-model="selectedProject" placeholder="选择项目" style="width: 300px; margin-bottom: 20px" @change="loadProgress">
        <el-option label="XX集团ERP实施项目" value="1" />
        <el-option label="YY公司财务系统上线" value="2" />
        <el-option label="ZZ制造业ERP项目" value="3" />
      </el-select>

      <!-- 整体进度 -->
      <el-card shadow="hover" style="margin-bottom: 20px">
        <h3>项目整体进度</h3>
        <el-progress :percentage="overallProgress" :stroke-width="20" :text-inside="true" />
        <el-row :gutter="20" style="margin-top: 20px">
          <el-col :span="6">
            <el-statistic title="总任务数" :value="75" />
          </el-col>
          <el-col :span="6">
            <el-statistic title="已完成" :value="45" />
          </el-col>
          <el-col :span="6">
            <el-statistic title="进行中" :value="20" />
          </el-col>
          <el-col :span="6">
            <el-statistic title="待开始" :value="10" />
          </el-col>
        </el-row>
      </el-card>

      <!-- 阶段进度 -->
      <el-timeline>
        <el-timeline-item 
          v-for="phase in phases" 
          :key="phase.id"
          :timestamp="phase.period"
          placement="top"
          :type="phase.status === 'completed' ? 'success' : phase.status === 'inprogress' ? 'primary' : 'info'"
        >
          <el-card shadow="hover">
            <div class="phase-header">
              <h4>{{ phase.name }}</h4>
              <el-tag :type="phase.status === 'completed' ? 'success' : phase.status === 'inprogress' ? 'primary' : 'info'">
                {{ phase.statusText }}
              </el-tag>
            </div>
            <el-progress :percentage="phase.progress" :status="phase.progress === 100 ? 'success' : ''" />
            <div class="phase-tasks">
              <el-tag v-for="task in phase.tasks" :key="task" size="small" style="margin-right: 5px; margin-top: 5px">
                {{ task }}
              </el-tag>
            </div>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'

const selectedProject = ref('1')
const overallProgress = ref(75)

const phases = ref([
  {
    id: 1,
    name: '项目启动',
    period: '2024-01-15 ~ 2024-02-15',
    status: 'completed',
    statusText: '已完成',
    progress: 100,
    tasks: ['项目启动会', '需求调研', '方案设计']
  },
  {
    id: 2,
    name: '系统配置',
    period: '2024-02-16 ~ 2024-05-31',
    status: 'completed',
    statusText: '已完成',
    progress: 100,
    tasks: ['系统安装', '基础配置', '权限设置']
  },
  {
    id: 3,
    name: '数据迁移',
    period: '2024-06-01 ~ 2024-08-31',
    status: 'inprogress',
    statusText: '进行中',
    progress: 65,
    tasks: ['数据清理', '数据导入', '数据验证']
  },
  {
    id: 4,
    name: '用户培训',
    period: '2024-09-01 ~ 2024-10-31',
    status: 'inprogress',
    statusText: '进行中',
    progress: 40,
    tasks: ['培训计划', '培训实施', '考核评估']
  },
  {
    id: 5,
    name: '系统上线',
    period: '2024-11-01 ~ 2024-12-31',
    status: 'pending',
    statusText: '待开始',
    progress: 0,
    tasks: ['上线准备', '正式上线', '稳定支持']
  }
])

const loadProgress = () => {
  // 加载项目进度数据
}

onMounted(() => {
  loadProgress()
})
</script>

<style scoped>
.implementation-progress-container {
  padding: 20px;
}

.phase-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.phase-tasks {
  margin-top: 15px;
}
</style>

